import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import clsx from 'clsx';
import Collapse from '@material-ui/core/Collapse';
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from '@material-ui/core/CardActions';
import IconButton from '@material-ui/core/IconButton';
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import CardHeader from '@material-ui/core/CardHeader';
import "./style.css";
import {ExpandMore} from "@material-ui/icons";
import {Link} from "react-router-dom";

const useStyles = makeStyles((theme) => ({
    card: {
        minWidth: 400,
        maxWidth:400,
        minHeight:300,
        borderRadius: 20,
        margin: 20
    },

    actionArea: {


    },
}));

export default function ImgMediaCard2(props) {
    const classes = useStyles();

    return (


            <Card
                className={classes.card}
                >
                <CardActionArea className={classes.actionArea} >
                   <Link to={props.card.route}>
                       <CardMedia
                           component="img"
                           alt={props.card.title}
                           height="200"
                           src={props.card.img}
                       />
                   </Link>
                    <CardContent >
                              <Typography gutterBottom variant="h5" component="h2" >
                                  <React.Fragment style={{textDecoration: "none"}}>{props.card.title}</React.Fragment>
                              </Typography>
                              <Typography variant="body2" color="textSecondary" component="p">
                                  <React.Fragment style={{textDecoration: "none"}}>{props.card.description}</React.Fragment>
                              </Typography>
                        </CardContent>
                </CardActionArea>
            </Card>

    );
}
